<template>
  <div>
    <h1>customRef</h1>
    <!-- 可以自定义ref,并对其依赖项进行跟踪和更新触发界面进行控制
    ref将数据变为一个响应式的数据
    对数据进行跟踪，数据一发生改变，界面也发生改变
    
    customRef  跟踪和触发界面两部分
    

    需求：搜索框   当输入完数据之后再更新
    ref写 稍微已更新界面马上更新  响应式

    写数据，写完之后 （空挡） 再更新
     -->
    <h1>{{ keyWordsRef }}</h1>
    <input type="text" v-model="keyWordsRef" />
    <h1>{{ keyWordsCustomRef }}</h1>
    <input type="text" v-model="keyWordsCustomRef" />
  </div>
</template>

<script lang="ts">
import { defineComponent, customRef, ref } from "vue";

export default defineComponent({
  setup() {
    const keyWordsRef = ref("");

    const keyWordsCustomRef = useCustomRef("");
    // 通过customRef自定义一个Ref
    function useCustomRef<T>(value: T, delay = 500) {
      return customRef((track, trigger) => {
        let timeout: number;
        return {
          get() {
            //  诉vue追踪数据
            track();
            return value;
          },
          set(newValue: T) {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
              value = newValue;
              // 当value改变得到新值，trigger告诉vue更新界面
              trigger();
            }, delay);
          },
        };
        // track 告诉vue追踪数据
        // trigger告诉vue去触发界面
      });
    }
    return {
      keyWordsRef,
      keyWordsCustomRef,
    };
  },
});
</script>

<style scoped>
</style>